import React, { Component } from 'react';
import { Modal, Form } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import FormContent from './FormContent';

interface IItemData {
  id: number;
  image_id: string;
  type: number;
  title: string;
  content: string;
  sort: string;
  status: boolean;
}

interface IProps {
  visible: boolean;
  title: string;
  handleCancel: () => void;
  itemData: IItemData;
  isEdit: boolean;
  getData: () => void;
}

interface IFormComponentProps extends FormComponentProps {
  itemData: IItemData;
  isEdit: boolean;
}

const FormComponent = Form.create<IFormComponentProps>()(FormContent);

class HomeForm extends Component<IProps, any> {
  public formComponent: any;

  public FormComponentRef: any;

  public render() {
    return (
      <Modal
        title={this.props.title}
        width="600px"
        bodyStyle={{
          width: '580px',
        }}
        maskClosable={false}
        okText="确定"
        cancelText="取消"
        visible={this.props.visible}
        onOk={() => {
          this.formComponent.handlerSubmit().then(() => {
            this.props.getData();
            this.props.handleCancel();
          });
        }}
        onCancel={() => {
          this.props.handleCancel();
          this.formComponent.ImageUploadRef.handlerClear(); // TODO: ref
        }}
      >
        {this.props.visible && (
          <FormComponent
            itemData={this.props.itemData}
            isEdit={this.props.isEdit}
            wrappedComponentRef={(form: any) => {
              this.formComponent = form;
            }}
          ></FormComponent>
        )}
      </Modal>
    );
  }
}
export default HomeForm;
